<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>缩放</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      body {
          background-color: lightgrey;
          perspective: 1000px;
      }

      .box1 {
          width: 100px;
          height: 100px;
          margin: 200px auto;
          background-color: orange;
          border-radius: 30px;
          transform-origin: center center;
          transition: all 1s;
      }

      .box1:hover {
          /*缩放效果*/
          transform: scaleX(2) scaleY(2) scaleZ(2);
      }
  </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>